<!-- 首页 -->
<template>
  <div>
     <navbar></navbar>
     <Tabcontro :cutnavigate="['流行','新歌','精选']"   @goodtype="clicktype" class="tab-control1" v-show="istabcontro" ref="tabcontro1"></Tabcontro>
     <bscroll ref="back" @showorhide="toggle"  @addpage="addpage" class="content">
         <Swiper>
            <Swiper-item  v-for="item in banners"  :key='item.link' >
                  <a :href="item.link">
                     <img :src="item.image" alt="" @load="swiperimg"/>
                  </a>
               </Swiper-item>
         </Swiper>
         <recommend :recommend="recommend" ref="recommend"></recommend>
         <feature></feature>
         <!-- 字符串类型父传子不用加v-bind 数组要加 -->
         <Tabcontro :cutnavigate="['流行','新歌','精选']"   @goodtype="clicktype" ref="tabcontro"></Tabcontro>
         <!-- 通过导航得到点击按钮的cutindex 然后根据cutindex 判断需要访问的数据是pop new 还是sell -->
         <goodslist :goodstype="goods[type]"></goodslist>
     </bscroll>
     <!-- 组件的click事件 后面有加native -->
     <backtop  @click.native="backtop" v-show="flag" ></backtop>
  </div> 
</template>

<script>
import { Swiper, SwiperItem} from "components/commot/swiper/index.js"
import feature from "views/Home/childrens/feature.vue"
import navbar from "components/content/navbar.vue"
import recommend from "views/Home/childrens/recommend.vue"
import Tabcontro from "components/commot/TabContro/Tabcontro.vue"
import goodslist  from  "components/content/goods/goodslist.vue"
import backtop from "components/content/backtop/backtop.vue"

import {getHomenetwork,gethomegoods}  from "network/Home.js"

import bscroll from "./childrens/Scroll.vue"


export default {
 name:"Home",
 data () {
    return {
       banners: [],
       recommend:[],
       goods:{
            pop:{ page:0,list:[]},
            new:{ page:0,list:[]},
            sell:{ page:0,list:[]},
       },
       type:"pop",
       flag:false,
       time:null,
       tabcontroy:0,
       istabcontro:false
    }
 },
 components: {
    navbar,
    Swiper,
    SwiperItem,
    recommend,
    feature,
    Tabcontro,
    goodslist,
    bscroll,
    backtop
 },
 methods: {
    //把商品的网络请求封装到方法里面
      gethomegoods(type){
         //因为页码是动态传递的   对象的变量只能用[]来获取
         const page =this.goods[type].page+1
         gethomegoods(type,page).then(res=>{
            //把请求到的数据存储在data中  属于把一个数组的数据传入另一个数组
              this.goods[type].list.push(...res.data.data.list)
              this.goods[type].page+=1 //网络请求后 页数加1
              this.$refs.back.finishPullUp()
               //  console.log(this.goods[type].list)
         }).catch(rej=>{
                console.log(rej)
           })
         },

         //子传父
         clicktype(cutindex){
               switch (cutindex){
                   case 0 :
                      this.type="pop"
                      break;
                   case 1:
                      this.type="new"
                      break;
                   case 2:
                      this.type="sell"
                      break; 
               }
               console.log(this.type)
               //下面的操作是为了把两个导航点击的一直
               this.$refs.tabcontro1.cutindex=cutindex
               this.$refs.tabcontro.cutindex=cutindex
         },
       //获取backtop组件的数据
       backtop(){
             this.$refs.back.scrollto()
       },

       //利用子传父 自定义事件 得到scroll组件中mounted中scroll方法的position的值 时刻监听窗口高度变化
       toggle(position){
            if(position.y<-(this.tabcontroy+10)){
                 this.flag=true
                 this.istabcontro=true
            }else{
                 this.flag=false
                 this.istabcontro=false
            }
      },

     
      //这里再次请求网络数据
      addpage(){
               //这个type就是导航栏点击的值所对应的数据类型
               this.gethomegoods(this.type)
      },

      //定义一个防抖的函数  防止重复调用一个函数
      debounce(func,wait){
         if(this.time) clearTimeout(this.time)
          this.time=setTimeout(() => {
              func()
           },wait);
      },

      //监听轮播图的加载 得到控制导航栏的高度
      swiperimg(){
         if(  this.$refs.tabcontro){
               this.tabcontroy =this.$refs.tabcontro.$el.offsetTop
               console.log(this.tabcontroy)
         }
         // console.log(this.tabcontroy) 得到控制台的在屏幕上的高度
      }
 },

 created () {
     //在首页组件被创建的时候调用网络请求 获得数据
      getHomenetwork().then(res=>{
         this.banners=res.data.data.banner.list;
         this.recommend=res.data.data.recommend.list

      }).catch(rej=>{
            console.log(rej)
      })
      //商品信息的网络请求
      this.gethomegoods("pop")
      this.gethomegoods("new")
      this.gethomegoods("sell")

 //解决为什么会在滑动中卡顿的情况  应为开始的时候并没有图片高度 加载后才有  但这个框架的scrollheight属性没有更新 所以要通知他改变
//   用betty-scrol框架的refresh()
        
  
},
mounted () {
       this.$bus.$on("imgloaditem",()=>{
            //调用30 次的这个方法会影响性能   所以要使用防抖
            //又因为 this.$refs.back.refresh这个函数可能还没加载 但图片已经加载了 所以调用这个方法是undefined 从而报错
            this.$refs.back && this.debounce(this.$refs.back.refresh,100)
         })
            //  this.$refs.back.refresh()
      
 },
 destroyed () {
    console.log("销毁了")
 }
}

</script>



<style  scoped>
.tab-control1{
   /* 吸顶效果 */
   position: relative;
   background: #f6f6f6;
   /* left: 0;
   right: 0;
   top: 34px; */
   z-index: 10;
   /* height: 44px; */
   margin-top:-10px ;
}
  .content {
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }

</style>